<template>
  <div>

    <el-row :gutter="5">
      <el-col :span="2">
        <el-input v-model="customer" placeholder="客户"></el-input>
      </el-col>
      <el-col :span="2">
        <template>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="2">
        <el-button type="success" @click="initTableData">搜索</el-button>
      </el-col>
    </el-row>
    <br>
    <!--添加弹出层-->
    <el-dialog title="服务分配" :visible.sync="isShowEditDialog" width="430px">
      <el-form ref="editForm" :model="formFileds" label-width="55px">
        <el-form-item label="服务类型" prop="dicValue" label-width="70px" >
          <el-input v-model="formFileds.dicValue" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="客户" prop="customer" label-width="70px">
          <el-input v-model="formFileds.customer" ></el-input>
        </el-form-item>
        <el-form-item label="服务内容" prop="serviceRequest" label-width="70px">
          <el-input v-model="formFileds.serviceRequest"></el-input>
        </el-form-item>
        <el-form-item label="服务概要" prop="overview" label-width="70px">
          <el-input v-model="formFileds.overview"></el-input>
        </el-form-item>
        <el-form-item label="指派给" prop="assigner" label-width="70px">
          <el-select v-model="formFileds.assigner" placeholder="请选择">
            <el-option v-for="item in roleList"  :label="item.userName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEdit" class="pull-right margin-l-25">确定</el-button>
          <el-button @click="isShowEditDialog = false;" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 表格开始 -->
    <el-table ref="list" :data="tableData" style="width: 100%" border stripe highlight-current-row
      :default-sort="{prop: 'date', order: 'descending'}"
      @select-all="handleCheckedAllAndCheckedNone"
      @select="handleCheckedAllAndCheckedNone"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="45" align="center">
      </el-table-column>
      <el-table-column property="id" label="编号">
      </el-table-column>
      <el-table-column property="customer" label="客户名">
      </el-table-column>
      <el-table-column property="dicValue" label="服务类型">
      </el-table-column>
      <el-table-column property="overview" label="概要信息">
      </el-table-column>
      <el-table-column property="createPeople" label="创建人">
      </el-table-column>
      <el-table-column property="assignTime" label="分配时间">
      </el-table-column>
      <el-table-column property="assigner" label="分配人">
      </el-table-column>
      <el-table-column property="createDate" label="创建时间">
      </el-table-column>
      <el-table-column property="updateDate" label="更新时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="update(scope.row)">分配</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination :page-size="page.pageSize" :total="page.totalCount" :current-page.sync="page.pageNo"
      @current-change="initTableData" :page-sizes="[2, 3, 5, 10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "Table",
    data() {
      return {
        options: [{
          value: '6',
          label: '咨询'
        }, {
          value: '8',
          label: '投诉'
        }, {
          value: '7',
          label: '建议'
        }],
        value: '',
        //弹出层数据
        formFileds: {},
        tableData: [],
        page: { //分页参数
          pageNo: 1,
          pageSize: 10,
          totalCount: 0
        },
        customer: '',
        roleList:[],
        assignTime: '',
        assigner: '',
        isShowEditDialog: false,
        multipleSelection: [],
        userId: [],
      }
    },
    methods: {
      //初始化表格
      initTableData() {
        axios.get("http://localhost:8081/customerServe/list", {
            params: {
              serveType: this.value,
              customer: this.customer,
              pageNo: this.page.pageNo,
              pageSize: this.page.pageSize
            }
          })
          .then(res => {
            if (res.data.code == 2000) {
              console.log("===========" + res.data.data)
              this.page.totalCount = res.data.data.total
              this.tableData = res.data.data.records
            }
          })
      },

      handleCheckedAllAndCheckedNone(selection) {

        // 当前选中仅一行时操作-（当前表格行高亮）
        1 != selection.length && this.$refs.list.setCurrentRow();
      },
      //多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

    update(row){
       this.isShowEditDialog = true;
        this.formFileds = row

        axios.get("http://localhost:8081/customerServe/id?id=",+row.id)
          .then(res => {
            if (res.data.code == 2000) {
              this.formFileds = res.data.data.records
              console.log(this.formFileds)
            }
          })

    },
    handleEdit() {
      console.log(this.formFileds)
       axios.get('http://localhost:8081/customerServe/update',
          {params: this.formFileds}
         )
         .then(res => {
           if (res.data.code == 2000) {
             console.log("dshddsdsn")
             this.isShowEditDialog = false;
             this.initTableData();
             this.$message.success('分配成功');
           }
         })
     },
 //初始化用户数据
      initRoleData() {
        axios.get('http://localhost:8081/user/selectUser')
          .then(res => {
            this.roleList = res.data.data
          })
      },

    },
    mounted() {
      this.initTableData()
      this.initRoleData()

    }
  }
</script>

<style scoped lang="less">
  .el-form {
    padding: 0 10px;
  }

  .el-date-editor {
    width: 100% !important;
  }
</style>
